<template>
  <div class="WorkingSchedule">
    <div class="line" style="font-weight: 600; font-size: 14px">入库退货</div>
    <div style="margin-top: 20px">
      <div
        v-if="types == 1"
        style="
          display: flex;
          margin-bottom: 20px;
          font-weight: 600;
          font-size: 14px;
        "
      >
        <div style="margin-right: 40px">
          箱单号：{{ detail.dispatch_number }}
        </div>
        <div style="margin-right: 40px">
          所属发货单号：{{ detail.invoice_number }}
        </div>
        <div style="margin-right: 40px">
          所属工厂：{{ detail.factory_name }}
        </div>
        <div>
          退货总数量：<span style="color: #2c70d6">{{ detail.num }}</span>
        </div>
      </div>
      <div
        v-if="types == 2"
        style="
          display: flex;
          margin-bottom: 20px;
          font-weight: 600;
          font-size: 14px;
        "
      >
        <div style="margin-right: 40px">
          所属工厂：{{ detail.factory_name }}
        </div>
      </div>
    </div>
    <el-table
      size="mini"
      :data="detail.sku_codearr"
      style="width: 100%; margin: 20px 0"
      border
    >
      <el-table-column prop="sku_code" label="SKU" align="center">
      </el-table-column>
      <el-table-column prop="num" label="计划退货数量" align="center"
        >>
        <template slot-scope="{ row }">
          {{ row.num || 0 }}
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        display: flex;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 14px;
      "
    >
      <div style="margin-right: 40px">退货原因：{{ detail.reason }}</div>
    </div>
    <div
      style="
        display: flex;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 14px;
      "
    >
      <div style="margin-right: 40px">
        上传图片：
        <template>
          <div v-if="detail.images" style="display: flex">
            <el-image
              v-for="item in detail.images"
              :key="item"
              :src="item"
              fit="contain"
              :lazy="true"
              :preview-src-list="detail.images"
              style="width: 100px; height: 100px; margin-right: 10px"
            ></el-image>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { postWarehousegetdispatchretuendetail } from "@/api";
export default {
  data() {
    return {
      detail: "",
      types: "",
    };
  },
  async mounted() {
    let id = this.$route.query.id;
    let obj = {
      id,
    };
    let res = await postWarehousegetdispatchretuendetail(obj);
    this.detail = res.data;
    this.types = res.data.types;
  },
};
</script>

<style lang="scss">
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>